<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div class="fz-30 w-70">
      oh yeah
    </div>
    <div style="margin:30px 300px">
      <Button @click="onClick">确认</Button>
      <Button @click="onClick2" type="success">删除</Button>
    </div>
    <Button type="info">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>

 <CheckboxGroup v-model="fruit">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
    <input v-model="value" placeholder="Enter ===" style="width: 300px">
  
  <router-link to="/login">go to login</router-link>
  
  
  </div>
</template>

<script>
// import Button from "./Button.vue";
export default {
  name: "HelloWorld",
  components: {
    // Button
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      value: '',
      fruit:[]
    };
  },
  methods: {
    onClick(e) {
      console.log("__________",this.value,this.fruit);
      //this.$router.push('login')
      this.$router.push({path:'/login',query:{id: '123',name:'aa'}}) //也可获取在params中
      //this.$router.push({path:'Login'})//跳转
    },
    onClick2(e) {
      console.log("oh yeah");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$width: 400px;
$height: 200px;
@function fn($width) {
  @return $width/2;
}

@mixin rounded-corners($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.hello {
  h1 {
    color: green;
    &.hover {
      color: lightgreen;
    }
  }
  h2 {
    color: pink;
    width: fn(1000px);
    height: $height/2;
    background: lightblue;

    @include rounded-corners(50px);

    @if $width>200px {
      color: aquamarine;
    }
  }
}
</style>
